<template>
    <div class="app-container">
        <el-form inline>
            <el-form-item>
                <el-button type="success" size="mini" @click="gai">添加任务</el-button>
            </el-form-item>
            <el-form-item label="任务名称">
                <el-input v-model="formdata.taskName"  filterable clearable ></el-input>
            </el-form-item>
            <el-form-item label="任务类型" clearable>
                <el-select v-model="formdata.typeIds" filterable clearable>
                    <el-option :label="item.typeName" :value="item.id" v-for="item in $store.state.renwulx.leixing"
                        :key="item.id" >

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="任务时间" clearable>
                <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                value-format="yyyy-MM-dda "
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="任务地点" clearable>
                <el-select v-model="formdata.district" clearable filterable>
                    <el-option :label="item.label" :value="item.label" clearable v-for="item in qu"
                    :key="item.id">

                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="getrenwulb" >搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="shuju" border>
            <el-table-column prop="id" label="编号ID"></el-table-column>
            <el-table-column prop="taskName" label="任务名称"></el-table-column>
            <el-table-column prop="taskTypeId" label="任务类型">
                <template slot-scope="scope">
                    {{ getType(scope.row.taskTypeId) }}
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
            <el-table-column prop="taskDistrict" label="任务地点"></el-table-column>
            <el-table-column prop="durationStatus" label="时长审核">
                <template slot-scope="scope">
                    <!-- null 待录入 -->
                    <!-- 0 待审核 -->
                    <!-- 1 已审核 -->
                    <!-- 2 已驳回 -->
                    <el-tag v-if="scope.row.durationStatus === null">待录入</el-tag>
                    <el-tag v-else-if="scope.row.durationStatus === 1" type="success">已审核</el-tag>
                    <el-tag v-else-if="scope.row.durationStatus === 0" type="warning">待审核</el-tag>
                    <el-tag v-else-if="scope.row.durationStatus === 2" type="danger">已驳回</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="durationStatus" label="时长审核" width="300px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"@click='gai1(scope.row)'>编辑</el-button>
                    <el-button v-if="scope.row.durationStatus !== 1" type="warning" size="mini" @click="rulu(scope.row.id)"  >时长录入</el-button>
                    <el-button v-if="scope.row.durationStatus === 0" type="danger" size="mini"  @click="shenhe(scope.row.id)">时长审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formdata.page" :page-sizes="[10, 20, 30, 40]" :page-size="formdata.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="时长录入" :visible.sync="chuxian">
           <rushichang @getshichang="getshichang" :id="id"  @done="chuxian = false"></rushichang>
        </el-dialog>
        <el-dialog title="时长审核" :visible.sync="chuxianl">
           <shichangshen :info="info" :duration="formdata.durationStatus"  @done1="chuxianl = false"  :startT="formdata.startTime"></shichangshen>
        </el-dialog>
    </div>
</template>
<script>
import shichangshen from './shichangshen.vue'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
let qu=[]
 qu=   regionData.find(item=>item.label=='江苏省').children.find(item=>item.label=='南京市').children
qu.push({value:'8888888',label:'外市'})
// console.log(qu,55555);
// console.log(regionData,22222);
import rushichang from '@/components/renwuzhongxin/rushichang.vue'
import { renwulb } from '@/api';


export default {
components:{
rushichang,
shichangshen
 },
    
    data() {
        return {
            value1:'',
            total: 0,
            formdata: {
                startDate: "",
                endDate: "",
                page: 1,
                pageSize: 10,
                durationStatus:0
            },
            shuju: [],
            qu:qu,
            chuxian:false,
            id:'',
            chuxianl:false,
            info:{},
            durationStatus:{},
            zongti:''
        }
    },
    methods: {
shenhe(info){
    this.chuxianl=true,
    this.info=info
    
},
        getshichang(val){
console.log(val,9988877);

        },

rulu(id){
this.chuxian=true,
this.id=id
},
        gai(){
            this.$router.push({
                path:'/renwuzhongxin/gai'}
            )
        },
        gai1(v) {

// 假设你只想传递对象的 ID

const zongti = v; // 或者 v 的其他唯一标识符

this.$router.push({

    path: '/renwuzhongxin/gai',

    query: v

});

},

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formdata.pageSize = val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.formdata.page = val
            this.getrenwulb()
        },

        getrenwulb() {
            renwulb(this.formdata).then(res => {
                console.log(res, 333);
                this.shuju = res.data.records


                this.total = res.data.total
            })
        },
        getType(typeId) {
            // console.log(this.$store.state.renwulx
                // , 999);
            let type = this.$store.state.renwulx
                .leixing.find(item => item.id == typeId)
            console.log(1);

            return type?.typeName
        }
    },
    watch:{
        value1:{
            handler(){
                console.log(this.value1);
                if(Array.isArray(this.value1)){
this.formdata.startDate=this.value1[0]
this.formdata. endDate=this.value1[1]
                }
            }
        }
    },
    mounted() {
        this.getrenwulb()
        this.getType(this.typeId)
        console.log(this.formdata.durationStatus,777445566);

    }

}



</script>